<template>
	<view class="main">
	<view class="selection1">
		<ul class="ulOne">
			<li>
			<image src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/lg/xq.png" mode=""></image>
			<!-- <image :src="list.img_urls" mode="widthFix"></image> -->
			</li>
			<li>{{list.name}}</li>
			<li @click="shoucang">
			<!-- <image src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/v3/sc1.png" mode=""></image> -->
			<u-icon v-if="isShowCang" class="icon" name="star-fill" color="#2979ff"></u-icon>
			<u-icon v-else class="icon" name="star" color="#2979ff" ></u-icon>
			<text>{{isShowCang?'已收藏':'收藏'}}</text>
			
			
			</li>
		</ul>
		
		<view class="viewTwo">
			<text>联系方式:</text>
			<ol>
				<li>
					<view class="part1">
						<view class="img">
						<image src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/v3/phone.png" mode=""></image>
						</view>
						<view class="">{{list.tell}}</view>
					</view>
					<!-- <view class="part2">拨打</view>	 -->
					<!-- <view class="part2">拨打</view> -->
					<u-button shape="square" size="mini"  type="primary" @click="call(list.tell)">拨打</u-button>
				</li>
				
				<li>
					<view class="part1">
						<view class="img">
							<image src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/v3/dh.png" mode=""></image>
						</view>
						<view class="">{{list.address}}</view>
					</view>
					<!-- <view class="part2">导航</view>	 -->
					<u-button shape="square" size="mini"  type="primary" @click="openMap(list)">导航</u-button>
				</li>
			</ol>
		</view>
		
		<view class="viewThree">
			<text>企业介绍:</text>
			<view class="">{{list.remark}}</view>
		</view>
	</view>
	<view class="selection2">
		<text>企业环境:</text>
		<ul class="selection2Ul">
			<li class="selection2UlLi" v-if="imgList.length!==0">
				<u-swiper height='380' :list="imgList" :effect3d="true" @click="clickImg"></u-swiper>
			</li>
			
			<li class="uVideo" v-if="list.video_urls">
				<video width="100%" :src="list.video_urls" controls></video>
			</li>
		</ul>
		
	</view>
	
	<view class="selection3">
		<ul>
			<li @click="changes(1)" :class="[type==1?'li1':'li2']">求职信息({{list.job_count || 0}})</li>
			<li @click="changes(2)" :class="[type==2?'li1':'li2']">招工信息({{list.worker_count || 0}})</li>
		</ul>
		<!-- 求职信息 -->
		<view class="parto" v-show="type==1">
			<view style="width: 300rpx;">
				<u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="change" :show-bar="false"></u-tabs>
			</view>
			<view style="margin-top: 150rpx;" v-show="jobHuntList.length==0">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
			<view class="card1" v-for="item in jobHuntList" @click="goDetil(item.id,'求职')">
				
				<view class="top">
				<view class="tongx">
				<image src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/image/a1/tonx.png" mode=""></image>
				</view>
				<view class="zhongl">
					<view class="">{{item.realname}}</view>
					<view class="">{{item.work_type}}</view>
				</view>
				<view class="xinz">{{item.wages}}{{item.settlement=='日结'?'元/天':''}} {{item.settlement=='月结'?'元/月':''}} {{item.settlement=='计件'?'元/件':''}}</view>
				</view>
				<view class="center">
					<view class="tag1">
						<u-tag :text="item.create_type" mode="plain" type="success" size="mini"/>
						<u-tag :text="item.settlement" mode="plain" type="info" size="mini"/>
						<!-- <u-tag text="47岁" mode="plain" type="info" size="mini"/>
						<u-tag text="月结" mode="plain" type="info" size="mini"/> -->
					</view>
					<view class="time2">{{item.add_time.substring(0,10)}}</view>
				</view>
				<view class="bottom">
					<view class="tag1">
						{{item.address}}
					</view>
					
					<view class="time22">{{ item.juli<1000?item.juli+'米':item.juli/1000+'km'}}</view>
				</view>
				
			</view>
	
		</view>
		<!-- 招工信息 -->
		<view class="parto" v-show="type==2">
			<view style="width: 300rpx;">
				<u-tabs :list="tabsList1" :is-scroll="false" :current="current1" @change="change1" :show-bar="false" ></u-tabs>
			</view>
			
			<view style="margin-top: 150rpx;" v-show="recruitList.length==0">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
			<view class="card2" v-for="item in recruitList"  @click="goDetil(item.id,'招工')">
				
				<view class="top">				
				<view class="zhongl">{{item.work_name}}</view>
				<view class="xinz">{{item.wages}}{{item.settlement=='日结'?'元/天':''}} {{item.settlement=='月结'?'元/月':''}} {{item.settlement=='计件'?'元/件':''}}</view>
				</view>
				
				<view class="center">
					<view class="tag1">
						<u-tag :text="item.create_type" mode="plain" type="primary" size="mini"/>
						<u-tag :text="item.settlement" mode="plain" type="info" size="mini"/>
						<u-tag :text="item.need_num+'人'" mode="plain" type="info" size="mini"/>
						<u-tag :text="item.sex_ask" mode="plain" type="info" size="mini"/>
					</view>
					
					<view class="time2">{{item.add_time.substring(0,10)}}</view>
					
				</view>
				<view class="bottom">
					<view class="tag1">
						<!-- <image src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/v3/yiZ.png" mode=""></image> -->
						
						{{item.address}}
					</view>
					
					<view class="time2">{{ item.juli<1000?item.juli+'米':item.juli/1000+'km'}}</view>
				</view>
				
			</view>

		</view>
		
		
	</view>
	
	<u-loadmore
	  v-if="jobHuntList.length != 0"
	  :status="status"
	  @loadmore="loadmore"
	></u-loadmore>
	<u-loadmore
	  v-if="recruitList.length != 0"
	  :status="status1"
	  @loadmore="loadmore1"
	></u-loadmore>
	</view>
</template>

<script>
	import api from '../../../../api/routes.js'
	import Map from "@/js_sdk/ms-openMap/openMap.js";
	export default{
		data(){
			return{
				type:1,
				imgList:[],
				list:[],
				tabsList: [{
						name: '推荐零工'
					}, {
						name: '附近零工'
				},],
				current: 0,
				tabsList1: [{
						name: '推荐岗位'
					}, {
						name: '附近岗位'
				},],
				current1: 0,
				
				yzId:0,
				jobHuntList:[],//求职数据
				recruitList:[],//招工数据
				status: "loadmore",
				status1: "loadmore",
				load: false,
				load1: false,
				total: 0,
				total1: 0,
				page:1,
				page1:1,
				page2:1,
				isShowCang:false,
			}
		},
		onReachBottom() {
		  //页面抵达底部后，如果此时的status状态是加载更多，那就调用loadmore方法
		  if (this.status == "loadmore") {
		    this.loadmore();
		  }
		  if (this.status1 == "loadmore") {
		    this.loadmore1();
		  }
		},
		onLoad(e) {
			console.log(e.dtId,'ddddd');
			console.log(e,'cccc');
			if(e.dtId){
				this.yzId=e.dtId;
			}else{
				this.yzId=e.lbId;
			}
			this.getStationList();
			this.getLgList()
			
			
		},
		computed:{
			isShow(){
				if(this.jobHuntList.length==0){
					return true
				}else{
					return false
				}
			},
			isShow1(){
				if(this.recruitList.length==0){
					return true
				}else{
					return false
				}
			},
		},
		methods:{
			shoucang(){
				this.isShowCang = !this.isShowCang
				wx.showToast({
					icon:'none',
					title: this.isShowCang?'收藏成功':'取消收藏',
				})
			},
			goDetil(id,type){
				uni.navigateTo({
					url: '/package/pages/searchJob/other/detils?id='+id+'&type='+type,
				});
			},
			changes(type){
				this.type=type				
				console.log(type);
				// this.search()
				if(type==1){
					this.search()
				}else{
					this.search1()
				}
			},
			
			search() {
				this.load = false;
				this.page1 = 1
				// this.limit = 5
				this.status = 'loadmore'
				this.jobHuntList = []
				this.getLgList()
			},
			search1() {
				this.load1 = false;
				this.page2 = 1
				// this.limit = 5
				this.status1 = 'loadmore'
				this.recruitList = []
				this.getLgList1()
			},
			change(index) {
				this.current = index;
				
				// 点击推荐或附近零工发送请求
				this.search()
			},
			change1(index) {
				this.current1 = index;
				// 点击推荐或附近岗位发送请求
				this.search1()
			},
			clickImg(index){							
				//调用预览图片的方法
				uni.previewImage({
					urls:this.imgList,
					current:index  //点击图片传过来的下标
				})
			console.log(index,"???");
			},
			// 拨打电话
			call(tell){
				uni.makePhoneCall({
					phoneNumber: tell, //仅为示例
				});
			},
			
			// 导航
			openMap(val) {
				console.log(val)
			  let { lat, lgt, address } = val;
			  console.log(+lat, +lgt, address,88888888888)
			  Map.openMap(+lat, +lgt, address, "");
			},
			getStationList(){
				let that =this;
				wx.getLocation({
				 type: 'wgs84',
				 success (res) {		   
					that.$myRequest({
						url: api.nearbyStation,
						method: "POST",
						data:{
							"page":1, //页码
							"limit":30, //取多少条
							"lgt":res.longitude, //当前用户经度
							"lat":res.latitude ,//当前用户纬度
						},
					}).then(res1=>{
						that.list = res1.data.page.list.find(r => r.id == that.yzId)
						
						if(that.list.img_urls){
							that.imgList = that.list.img_urls.split(',')
						}
						console.log(that.list,'详情页11');
						
						
					})
				 }
				})
			},
			// 获取企业的求职信息
			getLgList(){
				if (this.load) {
				  return;
				}
			 
				this.load = true;
				// 请求数据时，状态改为加载中状态
				this.status = "loading";
				this.$myRequest({
					url: api.lgInfoPageList,
					method: "POST",
					data:{
						"page":this.page1, //页码
						"limit":20, //取多少条
						"orderSort":this.current1==0?1:2, //排序方式:1-热门,2-附近
						"key":"", //搜索关键词,
						"stageId":this.yzId,//企业ID
						"wages":"", //薪资
						"settlement":"" ,// 结算方式
						"mbId":"",//用户ID, ~~~~传这个值时,代表查询我发布的 ,大多数都不传
						"infoType":'求职',  //类型:招工  / 求职  (必传)
						"lgt":wx.getStorageSync('nowLgt'), //当前用户经度
						"lat":wx.getStorageSync('nowLat'), //当前用户纬度
					},
				}).then(res=>{
					this.load = false;
					// 错误
					if (res.data.code !== 0) {
					  return uni.showToast({
					    title: res.msg,
					    icon: "none",
					  });
					  this.status = "nomore";
					}else{
						// this.jobHuntList=res.data.page.list;
						this.total = res.data.page.totalCount;
						// 将获取到的数据给数据列表，此处是解构，不适合用push
						this.jobHuntList = [...this.jobHuntList, ...res.data.page.list];
						this.ismore();
					}
					
					
					console.log(this.jobHuntList,'求职信息111');
				})
			},
			
			// 招工信息
			getLgList1(){
				if (this.load1) {
				  return;
				}
			 
				this.load1 = true;
				// 请求数据时，状态改为加载中状态
				this.status1 = "loading";
				this.$myRequest({
					url: api.lgInfoPageList,
					method: "POST",
					data:{
						"page":this.page2, //页码
						"limit":20, //取多少条
						"orderSort":this.current1==0?1:2, //排序方式:1-热门,2-附近
						"key":"", //搜索关键词,
						"stageId":this.yzId,//企业ID
						"wages":"", //薪资
						"settlement":"" ,// 结算方式
						"mbId":"",//用户ID, ~~~~传这个值时,代表查询我发布的 ,大多数都不传
						"infoType":'招工',  //类型:招工  / 求职  (必传)
						"lgt":wx.getStorageSync('nowLgt'), //当前用户经度
						"lat":wx.getStorageSync('nowLat'), //当前用户纬度
					},
				}).then(res=>{
					this.load1 = false;
					// 错误
					if (res.data.code !== 0) {
					  return uni.showToast({
					    title: res.msg,
					    icon: "none",
					  });
					  this.status1 = "nomore";
					}else{
						this.total1 = res.data.page.totalCount;
						this.recruitList = [...this.recruitList, ...res.data.page.list];
						this.ismore1();
					}
					
					
					console.log(this.recruitList,'招工信息');
				})
			},
			
			
			ismore() {
			
			  if (this.total === this.jobHuntList.length) {
			    this.status = "nomore";
			    // 否则，将状态改为loadmore，仍然还有数据
			  } else {
			    this.status = "loadmore";
			  }
			},
			
			ismore1() {
			
			  if (this.total1 === this.recruitList.length) {
			    this.status1 = "nomore";
			    // 否则，将状态改为loadmore，仍然还有数据
			  } else {
			    this.status1 = "loadmore";
			  }
			},
			
			loadmore() {
			  // 每次出发该方法，都要使页数加一
			  this.page1++;
			  this.getLgList();
			},
			loadmore1() {
			  // 每次出发该方法，都要使页数加一
			  this.page2++;
			  this.getLgList1();
			  console.log(this.page2,'page2');
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		background: #F1F1F1;
	}
	
	
	.selection1{
		// height: 120px;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		margin: 10px 0px;
		.ulOne{
			display: flex;
			margin: 0px 10px;
			height: 70px;
			margin-left: 10px;
			li{
				height: 70px;
				// border: 1px solid gray;
			}
			
			li:nth-child(1){
				width: 20%;
				background: #E5EAF0;
				border-radius: 10px;
				image{
					width: 100%;
					height: 100%;
				}
			}
			li:nth-child(2){
				flex: 1;
				line-height: 70px;
				font-size: 14px;
				font-weight: bold;
				margin-left: 10px;
			}
			// li:nth-child(3){
			// 	width: 10%;
			// 	text-align: center;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// 	image{
			// 		width: 20px;
			// 		height: 20px;
			// 	}
			// }
			
			li:nth-child(3){
				width: 20%;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				.icon{
					font-size: 24px;
				}
				text{
					font-size: 24rpx;
				}
			}
			// border: 1px solid gray;
		}
		.viewTwo{
			// border: 1px solid gray;
			// height: 130px;
			background: #F6F6F6;
			border-radius: 6px;
			margin: 10px;
			padding:10px 4px;
			text{
				font-size: 14px;
				font-weight: bold;
				display: inline-block;
				margin:0 0 8px 4px;
				
			}
			ol{
				display: flex;
				flex-direction: column;
				li:nth-child(1){
					height: 30px;
				}
				li{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					// height: 50px;
					.part1{
						// border: 1px solid pink;
						width: 86%;
						display: flex;
						
						.img{
							// width: 10%;
							// border:1px solid gray;
							margin:0 4px;
							display: flex;
							justify-content: center;
							align-items: center;
							image{
								width: 16px;
								height: 16px;
							}
						}
						.text1{
							// border:1px solid blue;
							
						}
					}
					
					.part2{
						width: 50px;
						height: 24px;
						line-height: 22px;
						color: #1684FC;
						border: 1px solid #1684FC;
						border-radius: 20px;
						text-align: center;
						
					}
					
				}
				
				
			}
			
		}
		.viewThree{
			margin: 10px;
			padding: 8px;
			text{
				font-size: 14px;
				font-weight: bold;
				display: inline-block;
				line-height: 30px;
				
				
			}
			view{
				font-size: 12px;
				color: gray;
			}
		}
		
		
	}
	.selection2{
		background: #FFFFFF;
		margin: 10px 0;
		padding: 0 10px;
		// height: 60px;
		// border: 1px solid gray;
		text{
			font-size: 14px;
			font-weight: bold;
			display: inline-block;
			line-height: 30px;
			
			
		}
		.selection2Ul{
			
			.selection2UlLi{
				margin: 10px;
				padding: 10px;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.uVideo{
				display: flex;
				justify-content: center;
			}
		}
		
	}
	.selection3{
		background: white;
		ul{
			display: flex;
			height: 50px;
			margin: 0 10px;
			justify-content: space-between;
			font-size: 16px;
			li{
				width: 48%;
				// border: 1px solid gray;
				text-align: center;
				line-height: 40px;
				margin-top: 10px;
				border-radius: 4px;
			}
			
			.li1{
				color: #1684FC;
				// background: #D7EBFE;
				background: linear-gradient(#3399FF, #FFFFFF);
			}
			.li2{
				color: gray;
				// background:;
				background: linear-gradient( #F1F3F4, #FFFFFF);
				
			}
		}
		.card1{
			margin: 10px;
			box-shadow: 0px 0px 2px 2px #F3F3F3;
			height: 140px;
			border-radius: 8px;
			padding: 8px;
			
			.top{
				height: 60px;
				display: flex;
				.tongx{
					width: 19%;
					// border: 1px solid gray;
					image{
						width: 90%;
						height: 100%;
					}
				}
				.zhongl{
					flex: 1;
					// border: 1px solid gray;
					view:nth-child(1){
						font-size: 14px;
						font-weight: bold;
						line-height: 36px;
					}
					
					view:nth-child(2){
						font-size: 10px;
						font-weight: bold;
						color: #1684FC;
						line-height: 24px;
					}
				}
				.xinz{
					width: 30%;
					// border: 1px solid gray;
					color: #E6A34A;
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					line-height: 24px;
				}
			}
			.center{
				height: 30px;
				// border: 1px solid gray;
				display: flex;
				line-height: 30px;
				.tag1{
					width: 21%;
					display: flex;
					justify-content: space-between;
				}
				.time2{
					display: flex;
					justify-content: flex-end;
					flex: 1;
					color: gray;
				}
				
			}
			.bottom{
				height: 40px;
				// border: 1px solid gray;
				border-top: 1px solid #EFEFEF;
				display: flex;
				justify-content: space-between;
				line-height: 40px;
				color: gray;
				.tag1{
					width: 79%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					
					// .time22{
						
					// }
				}
			}
		}
		.card2{
			margin: 10px;
			box-shadow: 0px 0px 2px 2px #F3F3F3;
			height: 120px;
			border-radius: 8px;
			padding: 8px;
			
			.top{
				height: 40px;
				display: flex;
				.tongx{
					width: 20%;
					// border: 1px solid gray;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.zhongl{
					flex: 1;
					display: flex;
					align-items: center;
					font-size:14px;
					font-weight: bold;
					view:nth-child(1){
						font-size: 14px;
						font-weight: bold;
						line-height: 24px;
					}
					
					view:nth-child(2){
						font-size: 10px;
						font-weight: bold;
						color: #1684FC;
						line-height: 20px;
					}
				}
				.xinz{
					width: 30%;
					// border: 1px solid gray;
					color: #E6A34A;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					line-height: 24px;
				}
			}
			.center{
				height: 30px;
				// border: 1px solid gray;
				display: flex;
				.tag1{
					width: 42%;
					display: flex;
					justify-content: space-between;
				}
				.time2{
					display: flex;
					justify-content: flex-end;
					flex: 1;
					color: gray;
				}
				
			}
			.bottom{
				height: 40px;
				// border: 1px solid gray;
				border-top: 1px solid #EFEFEF;
				display: flex;
				justify-content: space-between;
				line-height: 40px;
				color: gray;
				.tag1{
					width: 79%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					
					// .time22{
						
					// }
				}
			}
		}
		.areaxx{
			li{
				height: 230px;
				margin: 10px;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.parto{
			padding-bottom: 30px;
		}
	}
</style>